<template>
  <div class="v-tabs-content" :style="{ 'font-size': state.fontSize, width: state.width, height: state.height }">
    <div class="v-tabs-banner">
      <template v-for="(item, index) in state.data" :key="index">
        <div
          v-if="!item.banner || item.banner === 'normal'"
          class="v-tabs-item v-tabs-label-normal"
          @click="tabClick($event, item)"
          :style="{
            color: state.active == item.name ? '#FFF' : state.defaultColor,
            'background-color': state.active == item.name ? state.activeColor : '#FFF',
            'border-color': state.active == item.name ? state.activeColor : '#dcdfe6',
            'border-left': index == 0 ? '1px solid #dcdfe6' : 'none',
          }"
        >
          <span>
            {{ item.label }}
          </span>
          <!--
                        <span class="v-active-line"
                            :style="{ 'border-top-color': (state.active == item.name ? (state.activeColor) : 'transparent') }"></span>
                        <span class="v-active-arrow"
                            :style="{ 'border-top-color': (state.active == item.name ? (state.activeColor) : 'transparent') }"></span>
                        -->
        </div>
        <div
          v-if="item.banner === 'arrows'"
          class="v-tabs-item v-tabs-label-arrows"
          @click="tabClick($event, item)"
          :style="{
            color: state.active == item.name ? '#FFF' : state.defaultColor,
            'background-color': state.active == item.name ? state.activeColor : '#FFF',
            'border-color': state.active == item.name ? state.activeColor : '#dcdfe6',
            'border-left': index == 0 ? '1px solid #dcdfe6' : 'none',
          }"
        >
          <span>
            {{ item.label }}
          </span>
        </div>
      </template>
    </div>
    <div class="v-tabs-view">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
  import { reactive, onMounted, onUnmounted, watch, provide } from 'vue'
  defineOptions({ name: 'v-tabs' })

  const props = defineProps({
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    fontSize: {
      type: String,
      default: () => '12px',
    },
    activeColor: {
      type: [String],
      default: () => '#1dd2af',
    },
    defaultColor: {
      type: [String],
      default: () => '#000',
    },
    activeName: {
      type: [Number, String],
      default: () => '',
    },
  })

  const state = reactive({
    data: [],
    width: props.width,
    height: props.height,
    active: props.activeName,
    fontSize: props.fontSize,
    activeColor: props.activeColor,
    defaultColor: props.defaultColor,
  })

  watch(
    () => props,
    (newVal, oldVal) => {
      state.width = props.width
      state.height = props.height
      state.active = props.activeName
      state.fontSize = props.fontSize
      state.activeColor = props.activeColor
      state.defaultColor = props.defaultColor
    },
    { deep: true }
  )

  const emit = defineEmits(['tabClick'])
  const tabClick = (e, tab) => {
    emit('tabClick', tab)
    e.stopPropagation()
  }
  const clear = () => {
    state.data = []
  }
  //暴露方法
  defineExpose({
    clear,
  })

  //传递监听方法给子组件
  const setTabBar = (tab) => {
    const label = tab.label,
      type = typeof label
    state.data.push({
      label: tab.label,
      name: tab.name,
      banner: tab.banner, //控制样式
    })
  }
  const provideData = () => {
    return {
      active: () => state.active,
      setTabBar: setTabBar,
    }
  }
  provide('provideData', provideData)

  onMounted(() => {})

  onUnmounted(() => {})
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-tabs-content {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: column;
    justify-content: flex-start;
    cursor: default;
    height: 100%;
  }
  .v-tabs-banner {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: default;
    width: 100%;
    height: 32px;
    border-bottom: 1px solid #dcdfe6;
  }

  .v-tabs-item {
    //z-index: 10;
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    height: 100%;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    height: 24px;
    //margin-right: 20px;
  }

  .v-tabs-label-normal {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 100px;
  }
  .v-tabs-label-arrows {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 100px;
    position: relative;
  }

  .v-tabs-label-arrows:after {
    z-index: 100;
    content: '';
    position: absolute;
    right: -10px;
    top: 2.5px;
    /* move it down because of rounded corners */
    height: 16.97px; //288开方
    /* button_inner_height / sqrt(2) */
    width: 16.97px;
    /* same as height */
    background: inherit;
    /* use parent background */
    border: 1px solid #dcdfe6;
    //border-left: none;
    //border-bottom: none;

    border-right: none;
    border-top: none;

    border-radius: 0 !important;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
  }

  .v-active-arrow {
    display: 'inline-block';
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-top-color: transparent;
    //border-top-color: #1dd2af;
  }

  .v-active-line {
    display: 'inline-block';
    width: 100%;
    height: 0px;
    border-top: 1px solid transparent;
    border-top-color: transparent;
  }

  .v-tabs-view {
    width: 100%;
    height: calc(100% - 32px);
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: column;
    justify-content: flex-start;
  }
</style>
